<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>DojoX Analytics Touch Test</title>
		<style type="text/css">
			@import "../../mobile/themes/iphone/base.css";
			@import "../../mobile/themes/iphone/TabBar.css";
			#outerHeading {
				height: 240px;
			}
			#outer {
				width: 100%;
				height: 240px;
				border: 1px solid #54A201;
				background-color: #54A201;
			}
			#inner {
				width: 250px;
				height: 110px;
				border: 1px solid #7FB0DB;
				background-color: #7FB0DB
			}
			#log1 {
				width: 100%;
				height: 50px;
			}
		</style>
		<!-- required: dojo.js Update analyticsUrl: to point to your test server-->
		<script src="../../../dojo/dojo.js"
			data-dojo-config="parseOnLoad:true, async:true, isDebug: true, usePlainJson: true,
					sendMethod: 'script', sendInterval: 5000, mblAlwaysHideAddressBar: true,
					// the line below can be used to override the touchSampleDelay for touchMove,
					// targetProps, textContentMaxChars and showTouchesDetails
					//touchSampleDelay : 500, targetProps : ['id','className'],
					//textContentMaxChars : 12, showTouchesDetails : false,
					analyticsUrl: 'http://dojotoolkit.org/~dmachi/dojo-1.0/dojox/analytics/logger/dojoxAnalytics.php'">
		</script>

		<script>
			require([
				"dojo/ready",
				"dojo/parser",
				"dojox/mobile",			// This is a mobile app.
				"dojox/mobile/ScrollableView",
				"dojox/mobile/compat", // This mobile app supports running on desktop browsers
				"dojox/analytics",
				// this plugin returns the information dojo collects when it launches
				"dojox/analytics/plugins/dojo",
				// this plugin return the information the window has when it launches
				// and it also ties to a few events such as window.option
				"dojox/analytics/plugins/window",
				// this plugin tracks console. message, It logs console.error, warn, and
				// info messages to the tracker.  It also defines console.rlog() which
				// can be used to log only to the server.  Note that if isDebug() is disabled
				// you will still see the console messages on the sever, but not in the actual
				// browser console.
				"dojox/analytics/plugins/consoleMessages",
				// tracks where a dojo.touch.press and touch.release is done on a page
				"dojox/analytics/plugins/touchPress",
				// tracks where a dojo.touch.move is on a page an what it is over, periodically sampling
				// and storing this data
				"dojox/analytics/plugins/touchMove",
				"dojox/analytics/plugins/idle",
				"dojo/dom",
				"dojo/touch",
				"dojo/on",
				"dojo/_base/window",
				"dojo/has",
				"dojo/dom-style",
				"dojox/mobile/Heading"
			], function(ready, parser, mobile, scrollableView, compat,
					analytics, dojoplugin, windowplugin, consolemsgplugin,
					touchpressplugin, touchmoveplugin, idleplugin,
					dom, touch, on, win, has, domStyle){
				ready(function(){
					var action2 = function(e){
						dom.byId("log1").innerHTML = "";
						var info = " e.target.id=" + e.target.id + " | e.type=" + e.type + " | e.currentTarget.id="+ e.currentTarget.id+ " | e.touches="+ e.touches;
						dom.byId("log1").innerHTML += info;
					};

					var action = function(e){
						dom.byId("log").innerHTML = "";
						var info = "[Touch Event]: " + e.type + "<br/> ------ Event Properties: ------<br/>";
						for(var i in e){
						  if(i == "touches" || i == "targetTouches" || i == "changedTouches"){
							info += i + ": " + e[i].length + "<br/>";
						  }else{
							if(typeof e[i] != "function"){
							  info += " " + i + ": " + e[i] + "<br/>";
							}
						  }
						}
						if(e.touches){
							if(e.touches.length == 0){
								info += "[touches]: " + e.touches + "<br/> ------ Event touches: ------<br/>";
									for(var i in e.touches){
										//console.log("includes "+i+" = "+e.touches[i]);
										if(i == "target"){
											info += i + ": " + e.touches[i].id + "<br/>";
										}else{
											if(typeof e.touches[i] != "function"){
												info += " " + i + ": " + e.touches[i] + "<br/>";
											}
										}
									}
							}else{
								info += "[touches length]: " + e.touches.length + "<br/> ------ Event touches: ------<br/>";
								for(var j in e.touches){
									for(var i in e.touches[j]){
										if(i == "target"){
											info += i + ": " + e.touches[j][i].id + "<br/>";
										}else{
											if(typeof e.touches[j][i] != "function"){
												info += " touches["+j+"] " + i + ": " + e.touches[j][i] + "<br/>";
											}
										}
									}
								}
							}
						}else{
							var info = "[Touch Event]: " + e.type + "<br/> ------ Event Properties: ------<br/>";
						}
						dom.byId("log").innerHTML += info;
					};

					//1. should work well on PC and touch devices
					on(outer, touch.press, action2);
					on(outer, touch.move, action2);
					on(outer, touch.release, action2);
					on(outer, touch.cancel, action2);

					// Event info, uncomment one of the lines below to see what the event returns
					on(inner, touch.press, action);
					//on(inner, touch.move, action);
					//on(outer, touch.move, action);
					//on(outer, touch.release, action);
					//on(outer, "touchend", action);

					on(win.doc, "orientationchange", function(e){
						dom.byId("log1").innerHTML="";
						dom.byId("log").innerHTML="";
					});
				});
			});
		</script>
	</head>
	<body style="visibility:hidden;">
		<div id="categ" dojoType="dojox/mobile/ScrollableView"  selected="true">
	 		<div id="outerHeading" dojoType="dojox/mobile/Heading" fixed="top">
				<div id="outer">
					outer content <div id="inner">inner content</div>
				</div>
			</div>
				<div id="log1"></div>
				<hr/>
				<div id="log"></div>

		</div>
	</body>
</html>
